<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单预览</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="fonts/glyphicons-halflings-regular.woff2">
</head>
<body>
<div id="top"></div>
<div class="container" style="background-color: white;">

    <div class="row" style="margin-top: 40px;">
        <h3 style="margin-left: 10%"><span class="glyphicon glyphicon-tree-conifer" style="color: #a10e0b"></span>订单预览
        </h3>
        <div class="col-md-10 col-md-offset-1">

            <table class="table table-bordered table-striped table-hover">
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>

                <tbody id="cartTable" style="table-layout: fixed;border-collapse: collapse"></tbody>

            </table>
            <div class="pull-right">
                <div style="margin-bottom: 20px;">
                    <h4>商品金额总计：<span id="total" class="text-danger"></span></h4>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="pull-right" style="margin-right: 40px;">
            <div>
                &nbsp;&nbsp;
                <button id="submit-order" class="btn  btn-danger btn-lg">提交订单</button>
            </div>
            <br><br>
        </div>

    </div>
</div>

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")
        //发送ajax请求购物车数据
        $.ajax({
            url: "/PDD/cart?method=showCart",
            dataType: "json",
            success: function (data) {
                let cartList = data.data
                if (cartList != null) {
                    //总额
                    let tCount = 0;
                    //拼接html
                    let html = '';
                    for (let i = 1; i <= cartList.length; i++) {
                        let cart = cartList[i - 1];
                        html += `<tr>
               <th>${i}</th>
               <th>${cart.pName}</th>
               <th>${cart.price.toFixed(2)}</th>
               <th width="100px">${cart.num}</th>
               <th>¥&nbsp;${cart.count.toFixed(2)}</th>
           </tr>`;
                        tCount += cart.count;
                    }
                    // 将购物车信息拼接到页面中
                    $("#cartTable").append(html);
                    // 给总额赋值
                    $("#total").html(tCount.toFixed(2))
                }
            }
        })
        //提交订单点击事件
        $("#submit-order").click(function () {
            $.ajax({
                url: "/PDD/order?method=addOrder&isCart=1&sum=" + $("#total").text(),
                dataType: "json",
                success: function (data) {
                    if (data.code !== 1) {
                        alert("提交订单失败")
                    } else {
                        let oId=data.data.oId
                        let totalCount=data.data.oCount
                        window.location.href = "pay.html?oId="+oId+"&totalCount="+totalCount
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("失败" + jqXHR.responseText); // 输出响应内容
                }
            })
        })
    })
</script>
</body>
</html>